<template>
  <view class="content">
    <uv-navbar title="广场" :border="false" bg-color="linear-gradient(to right, #fef8ee, #e6fefc)" :autoBack="true" :titleStyle="titleStyle" :placeholder="true">
      <template v-slot:right>
        <view class="map flex alignCenter fz12" :style="iconStyle()">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283509915568554.png" width="16px" height="16px"></uv-image>
          <text class="bold">北京市</text>
        </view>
      </template>
    </uv-navbar>

    <view class="flex justifyBetween alignCenter navTiems">
      <view class="item left" @click="itemClick(0)">
        <image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/21/17295104115769577.png" mode="widthFix" />
      </view>
      <view class="item right" @click="itemClick(1)">
        <image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/21/17295104113673729.png" mode="widthFix" />
      </view>
    </view>

    <view @click="proxy.$utils.toLink('/packagePages/topic/topicList')">
      <view class="topic flex alignCenter">
        <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/27/17300236489472487.png" width="24px" height="24px"></uv-image>
        <view class="fz16 bold" style="margin-left:8px">广场话题</view>
      </view>

      <view class="topicList">
        <view class="item shrink textCenter" @click.stop="proxy.$utils.toLink(`/packagePages/topic/topicDetails?id=${item.id}`)" v-for="(item, index) in topicList" :key="index">
          <view class="flex alignCenter justifyCenter">
            <uv-image :src="item.topicImage" width="30px" height="30px" shape="circle"></uv-image>
          </view>
          <view class="bold fz14 topicName">{{item.topicName}}</view>
          <view class="fz12" v-if="item.dynamicNumber">{{item.dynamicNumber}}个动态</view>
        </view>
      </view>
    </view>

    <uv-sticky :offsetTop="counter.navBarHeight">
      <view class="tabs flex alignCenter">
        <view class="tab" :class="{active:current==index}" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)">
          {{item.name}}
        </view>
      </view>
    </uv-sticky>

    <view v-for="(item, index) in listParams[key]" :key="index">
      <view v-if="item.publishType==3" style="margin-top: 15px;">
        <voteItem :item="item" :index="index"></voteItem>
      </view>
      <view class="flex itemBox" v-else-if="item.publishType==1">
        <dynamicItem :item="item"></dynamicItem>
      </view>
    </view>
    <uv-empty v-if="list.length==0 && current==1" width="120" text="关注的人暂时还没有更新哦～" icon="/static/img/404.png"></uv-empty>

    <!-- <view class="add" @click="proxy.$utils.toLink('/packagePages/dynamic/publishUpdates')">
      <uv-image src="/static/img/add.png" width="40px" height="40px"></uv-image>
    </view> -->

    <uv-load-more :status="status" />

    <uv-back-top :scroll-top="scrollTop"></uv-back-top>
  </view>
</template>

<script setup lang="ts">
import dynamicItem from "@/pages/tabbar/tabbar-2/components/dynamicItem.vue";
import voteItem from "@/pages/tabbar/tabbar-2/components/voteItem.vue";
import showImages from "@/components/main/showImages.vue";
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();

//data
let status = ref("loadmore");
let tabs = ref([{ name: "推荐" }, { name: "关注" }]);
let current = ref(0);
let params = {
  page: 1,
  pageSize: 10,
};
let topicParams = {
  page: 1,
  pageSize: 10,
}; //话题入参
let totalPageParams = {};
let pageParams = {};
let topTotalPages = 0; //话题数量
let topicList = ref([]); //话题列表
let scrollTop = ref(0);
let listParams = ref({});

let titleStyle = computed(() => {
  return {
    fontWeight: "bold",
    fontSize: "18px",
    color: "#353C4E",
  };
});

//话题列表
let topicArr = computed(() => {
  return proxy.$utils.chunkArray(topicList.value, 6);
});

let list = computed(() => {
  return listParams.value[`list${current.value}`] || [];
});

let key = computed(() => {
  return `list${current.value}`;
});

//生命周期
onLoad(async () => {
  await proxy.$apis.movementsClearCache({ type: current.value + 1 });
  dataLoad();
});

onShow(() => {
  uni.showTabBar();
  if (counter.dataRefresh) {
    dataLoad();
    counter.dataRefresh = false;
  }
});

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

onPullDownRefresh(async () => {
  //清理缓存
  await proxy.$apis.movementsClearCache({ type: current.value + 1 });
  //重新触发获取数据方法，刷新接口
  dataLoad();

  //结束刷新
  uni.stopPullDownRefresh();
});

onShow(() => {
  uni.setTabBarStyle({ borderStyle: "white" });
  // #ifdef MP-WEIXIN
  uni.hideHomeButton();
  // #endif
  getTopic();
});

onReachBottom(() => {
  getMore();
});

function itemClick(num) {
  if (num == 0) {
    proxy.$utils.toLink(`/packagePages/vote/voteList`);
  } else {
    proxy.$utils.toLink("/packagePages/bullet/bulletChat");
  }
}

async function dataLoad() {
  list.value = [];
  params.page = 1;
  getInfo();
}

function iconStyle() {
  let right = 0;
  // #ifdef MP-WEIXIN
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  right = menuButtonInfo.width;
  // #endif
  return {
    paddingRight: `${right}px`,
  };
}

function commentContentStyle(str) {
  let windowWidth = counter.windowWidth;
  let wid = windowWidth - 30 - 30 - 43 - 10 - str.length * 20;
  return {
    width: wid + "px",
  };
}

//获取话题
async function getTopic() {
  let resp = await proxy.$apis.queryAllTopic(topicParams);
  let arr = [...topicList.value];
  if (resp.records.length) {
    arr = proxy.$utils.filterArr(arr, resp.records, "id");
  }
  topicList.value = arr;
  topTotalPages = resp.totalPages;
  console.log("话题", resp);
}

function lower() {
  if (topicParams.page >= topTotalPages) return;
  topicParams.page++;
  getTopic();
}

let tabClick = (index) => {
  current.value = index;
  params.page = pageParams[key.value] || 1;
  getInfo();
};

async function getInfo() {
  try {
    status.value = "loading";
    let list = [];
    if (listParams.value.hasOwnProperty(key.value)) {
      list = proxy.$utils.deepcopy(listParams.value[key.value]);
    }

    //当前分类的页码
    pageParams[key.value] = params.page;

    let resp;
    if (current.value == 0) {
      //推荐
      resp = await proxy.$apis.recommend(params);
    } else if (current.value == 1) {
      //关注
      resp = await proxy.$apis.recommendFollow(params);
    } else {
      resp = await proxy.$apis.recommendSameCity(params);
    }
    totalPageParams[key.value] = resp.totalPages;

    if (resp && resp.records.length) {
      list = proxy.$utils.filterArr(list, resp.records, "id");
    }
    listParams.value[key.value] = list;
    console.log("动态", listParams.value[key.value]);
  } catch (error) {
  } finally {
    status.value = "nomore";
  }
}

let getMore = () => {
  if (pageParams[key] >= totalPageParams[key.value]) return;
  params.page++;
  getInfo();
};

//获取页面元素信息
function viewInfo(id, type) {
  return new Promise((resolve, reject) => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select(id)
      .boundingClientRect((data) => {
        if (data) {
          resolve(data[type]);
        } else {
          resolve(0);
        }
      })
      .exec();
  });
}
</script>



<style lang="scss">
page {
  background: linear-gradient(to right, #fef8ee, #e6fefc);
}
</style>
<style lang="scss" scoped>
::v-deep .uv-navbar {
  .uv-navbar__content {
    background-color: transparent !important;
  }
}
.navTiems {
  margin: 15px;
  .item {
    width: calc((100% - 25px) / 2);
  }
}
.topic {
  padding: 5px 15px 15px;
}
.topicList::-webkit-scrollbar {
  display: none;
}
.topicList {
  display: flex;
  margin-left: 15px;
  margin-bottom: 25px;
  overflow-y: auto;
  .item {
    background-color: white;
    margin-right: 15px;
    padding: 10px 15px;
    border-radius: 10px;
    color: #363d4e;
    .topicName {
      padding: 15px 0 10px;
    }
  }
}
.tabs {
  background: linear-gradient(to right, #fef8ee, #e6fefc);
  padding-left: 15px;
  padding-bottom: 15px;
  .active {
    color: white !important;
    background-color: #36d9fa !important;
    border-color: #36d9fa !important;
  }
  .tab {
    background-color: #faf5ee;
    border: 1px solid #e4e1de;
    border-radius: 15px;
    display: inline-block;
    color: #a59c9c;
    font-size: 15px;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
  }
}

.itemBox {
  padding: 15px;
  background: white;
  border-radius: 10px;
  padding: 15px;
  margin: 15px;
}

::v-deep .uv-empty {
  margin-top: 25px !important;
  image {
    width: 120px !important;
  }
}
</style>
